<template>
  <div class="uploadVideo">
    <div class="btnbox11 flex flexdc">
      <div class="uploadvideofile pre flexcenter el-icon-upload">{{ title }}
        <input ref="video" class="filePrew op0" style="width:80px!important;height:32px!important;" type="file" @change="addpht()">
      </div>
      <div class="tip">{{ tip }}</div>
    </div>
    <div class="previewImg">
      <video
        :src="picSrc"
        controls
        :muted="muted"
        :loop="loop"
        :autoplay="autoplay"
        class="video_cage"
      />
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props: {
    muted: {
      type: Boolean,
      default: false
    },
    loop: {
      type: Boolean,
      default: false
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    videoType: {
      type: String,
      default: ''
    },
    picUrl: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean
    },
    tip: {
      type: String,
      default: ''
    },
    state: {
      type: Number,
      default: null
    },
    title: {
      type: String,
      default: '点击上传'
    }
  },
  data() {
    return {
      loading: true,
      preViewVisible: false,
      picSrc: this.picUrl,
      type: this.state,
      videoTypeval: '',
      fileobj: {
        videofile: '',
        videoType: '',
        base64Val: this.picUrl
      }
    }
  },
  watch: {
    picUrl(newName, oldName) {
      // console.log('newName, oldName')
      // console.log(newName)
      this.picSrc = newName
      this.fileobj.base64Val = newName
    }
  },
  created() {
    this.videoTypeval = this.$attrs.videoType
    if (this.picSrc !== undefined) {
      this.loading = false
    }
    this.picSrc = this.picUrl
    // console.log('picUrl-----')
    // console.log(this.picUrl)
  },
  methods: {
    addpht() {
      var that = this
      var f = new FileReader()
      // console.log(this.$refs.video.files[0])
      f.readAsDataURL(this.$refs.video.files[0])
      f.onload = function(ev) {
        // console.log(that.$refs.img.files[0])
        // console.log(that.$refs.img.files.length)
        // console.log(that.$refs.img.files.length > 0)
        that.picSrc = f.result
        // console.log('图片加载完成')
        // console.log(that.videoTypeval, (that.$refs.img.files[0].size / 1024).toFixed(2))
        // console.log(ev)

        that.fileobj.videofile = that.$refs.video.files[0]
        that.fileobj.videoType = that.videoTypeval,
        that.fileobj.base64Val = ev.target.result
        // let fileobj = {
        //   'videofile': that.$refs.img.files[0],
        //   'videoType': that.videoTypeval,
        //   'base64Val':ev.target.result
        // }
        that.$emit('sendVideo', that.fileobj)
      }
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.uploadVideo {
  width: 260px !important;
}
.el-icon-upload:before {
  margin-right: 4px;
}
.btnbox11 {
  // width: 180px;
}
.tip {
  width: 122px;
  line-height: 24px;
  font-size: 12px;
  color: #ff0000;
  margin-left: -20px;
}
.uploadvideofile {
  width: 90px;
  height: 32px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}
.filePrew {
  position: absolute;
  width: 100% !important;
  height: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
.previewImg {
  margin-top: 15px;
  .img {
    width: 160px;
    height: 160px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
  }
}
</style>
